layui.use(['table','layer','form','upload'], function() {
    var table = layui.table,
        $ = layui.$,
        layer=layui.layer,
        form=layui.form,
        upload=layui.upload;
    //table渲染
    table.render({
        elem: '#usertable',
        height: 600,
        url: '../user/list' //数据接口
        ,
        toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,
        defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
        }],
        page: true //开启分页
        ,
        cols: [
            [ //表头
                {type:'checkbox'},
                {
                    field: 'id',
                    title: 'ID',
                    sort: true,
                }, {
                field: 'username',
                title: '用户名',

            }, {
                field: 'password',
                title: '密码',

            }, {
                field: 'faceImage',
                title: '头像',
                templet: function (d) {
                    return '<img class="layui-upload-img" id="demo1" src="../'+d.faceImage+'">'
                }

            }, {
                field: 'nickname',
                title: '别名',

            }, {
                field: 'fansCounts',
                title: '积分',
                edit:'text',

                sort: true
            }, {
                field: 'followCounts',
                title: '订阅数',
                edit:'text',

                sort: true
            }, {
                field: 'iphone',
                title: '手机',
            }, {
                field: 'collection',
                title: '收藏',
                edit:'text'
            }, {
                field: 'remark',
                title: '备注',
                edit:'text'
            }
                ,{title:'操作', toolbar: '#barDemo' }
            ]
        ]
    });
    //监听工具条
    table.on('tool(usertable)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        if (layEvent === 'detail') { //查看
            layer.open({
                type:2,
                title:"用户详情",
                area:["90%","90%"],
                content:"detaillist?id="+data.id,
                success:function () {
                    $.ajax({
                        url: "detail",
                        datatype:"JSON",
                        type:"GET",
                        success:function (result) {
                            $("#username").val("11")
                            $("#iphone").val("111111")
                        }
                    })
                    // form.render({
                    //     elem: "#userform",
                    //     url: "detail",
                    //     datatype:"JSON",
                    //     type:"GET",
                    //     success:function (user) {
                    //         // form.val("userform", {
                    //         //     // formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    //         //                 "username": user.username // "name": "value"
                    //         //                 ,"faceImage": user.faceImage
                    //         //                 ,"iphone": user.iphone
                    //         //                 ,"fansCounts": user.fansCounts
                    //         //                 ,"follewCounts": user.follewCounts
                    //         //             });
                    //         $("#username").val("11")
                    //     }
                    // });
                }
            })
        } else if (layEvent === 'del') { //删除行
            layer.confirm('真的删除行么', function (index) {
                $.ajax({
                    data: {id:data.id},
                    url: "delete",
                    type: "GET",
                    datatype: 'json',
                    success: function (result) {
                        layer.alert(result.msg, {icon: 1}, function (index1) {
                            layer.close(index1);
                            table.reload("usertable")
                            // location.reload()
                        })
                    }
                })
            })
        }
    })
    //监听单元格编辑
    table.on('edit(usertable)', function(obj){
        var value = obj.value //得到修改后的值
            ,data = obj.data //得到所在行所有键值
            ,field = obj.field; //得到字段
        $.ajax({
            type:"POST",
            url:"update",
            dataType:"JSON",
            data: {
                id:data.id,
                value:value,
                field:field
            },
            success:function (result) {
            }
        })

    });
    //头工具栏监听
    table.on('toolbar(usertable)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var checkStatus = table.checkStatus(obj.config.id);
        var data = checkStatus.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var array=new Array();
        for(var i in data){
            array[i]=data[i].id;
        }

        if (layEvent === 'add') {  //添加
              index= layer.open({
                type:2,
                title:"用户新增",
                area:["90%","90%"],
                content:"add",
                success:function () {

                }
            })
        } else if (layEvent === 'BulkDelete') { //批量删除
            layer.confirm('真的删除选中数据', function (index) {
                $.ajax({
                    data: {"ids":array},
                    url: "bulkdelete",
                    type: "GET",
                    datatype: 'json',
                    traditional:true,//声明上传的数据为数组

                    success: function (result) {
                        layer.alert(result.msg, {icon: 1}, function (index1) {
                            layer.close(index1);
                            table.reload("usertable")
                        })
                    }
                })
            })
        }
        else if (layEvent=='update'){//编辑更新

        }
    })
    //用户名及或别名
    $("#search").click(function () {
        var data=document.getElementById("usersearch").value;
        table.reload('usertable', {
            url:'search',
            where: { //设定异步数据接口的额外参数，任意设
                "value":$("#usersearch").val()
            }
            ,page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    })
    //自定义验证规则
    form.verify({
        nikename: function(value){
            if(value.length < 5){
                return '昵称至少得5个字符啊';
            }
        }
        ,telephone: [/(.+){6,12}$/, '电话号码必须6到12位']
        ,pass: [/(.+){6,12}$/, '密码必须6到12位']
        ,repass: function(value){
            if($('#password').val()!=$('#repassword').val()){
                return '两次密码不一致';
            }
        }
    });
    //监听提交
    form.on('submit(adduser)', function(data){
        var data=data.field
        var index=layer.open();
        $.ajax({
            type:"POST",
            url:"adduser",
            dataType:"JSON",
            data:data,
            success:function (result) {
                if (result.code==0){
                    // parent.layer.close(index)
                    // parent.layui.table.reload('usertable')
                    setTimeout(function(){
                        //刷新父页面
                        parent.layer.close(index);
                        // parent.layui.table.reload('usertable')
                        parent.location.reload()
                        // var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                         // 关闭layer
                    },400)
                }else{
                    layer.msg(result.msg)
                }

            }
        })
        return false;
    });
    $("#closeform").click(function () {
        var index=layer.open()
        parent.layer.close(index)

    })
    var uploadInst = upload.render({
        elem: '#uploadimg'
        ,url: 'imgupload' //改成您自己的上传接口
        ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#imgupload').attr('src', result); //图片链接（base64）

            });
        }
        ,done: function(res){
            //如果上传失败
            if(res.code > 0){
                return layer.msg('上传失败');
            }
            //上传成功
            $('#faceImage').val(res.msg)
        }
        ,error: function(){
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #ff5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });
        }

    });


})